<template>
<div>

<Table border :columns="columns1" :data="data"></Table>

<Modal
    v-model="menuVisible"
    title="配置菜单"
    :loading="true"
    @on-ok="ok"
    @on-cancel="cancel">

    <Tree ref="menutree" :data="treedata" :render="renderContent" show-checkbox></Tree>
    
</Modal>

</div>
</template>

<script>


export default {
	
	name : 'dlqroleconfig',
	
	data () {
		return {

			form : {},

			menuVisible : false,

		  	columns1: [
                {
                    title: '角色名称',
                    key: 'name'
                },
                {
                    title: '角色编号',
                    key: 'code'
                },
                {
                    title: '操作',
                    key: 'action',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small',
                                },
                                on: {
		                            click: () => {
		                            	console.log('编辑');
		                            }
		                        }
                            }, '编辑'),
                            h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small',
                                },
                                on: {
		                            click: () => {
		                            	console.log('设置菜单');
		                            	console.log(params);


		                            	this.setMenu(params.row);

		                            	
		                            }
		                        }
                            }, '设置菜单'),
                            h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small',
                                },
                                on: {
		                            click: () => {
		                            	console.log('删除');
		                            }
		                        }
                            }, '删除')
                        ]);
                    }
                }
            ],

            data : [],

            treedata : [],

            current : {},
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {

	},

	methods : {
		init () {
			this.$http({
				fun : 'roleList',
				cb : res => {
					console.log(res);
					this.data = res;
				}
			});

			// this.$http({
			// 	fun : 'menuConfigList',
			// 	cb : res => {
			// 		console.log(res);
			// 		res.forEach(item => {
			// 			item['title'] = item.name;
			// 			item['expand'] = true;

			// 		})
			// 		const result = this.$util.transData(res, 'id', 'pid', 'children');
			// 		console.log(result);
			// 		this.treedata = result;
			// 	}
			// });
		},

		save () {
			this.$http({
				fun : 'roleOpt',
				...this.form,
				cb : res => {
					console.log(res);
				}
			});
		},

		ok () {
			//const checked = this.$refs.menutree.getCheckedNodes();
			const checked = this.$refs.menutree.getCheckedAndIndeterminateNodes();

			console.log(checked);

			let menuIdsChecked = '';
			let menuIdsUnchecked = '';

			checked.forEach(item => {
				if(item.checked){
					menuIdsChecked += item.id + ',';
				}else{
					menuIdsUnchecked += item.id + ',';
				}
				
			})

			this.$http({
				fun : 'roleSetMenu',
				roleId : this.current.id,
				menuIdsChecked,
				menuIdsUnchecked,
				cb : res => {
					console.log(res);
				}
			});

			console.log(checked);
		},

		cancel () {},

		renderContent (h, { root, node, data }) {
            return h('span', 
            {
                style: {
                    display: 'inline-block',
                    width: '100%'
                }
            }, 
	        [
                h('span', data.title),
            ])
        },

        //获取该角色的菜单
        setMenu (item) {
        	
        	this.current = item;

        	this.$http({
        		fun : 'getMenuByRoleId',
        		roleId : item.id,
        		cb : res => {
        			console.log('getMenuByRoleId');
        			console.log(res);

        			res.forEach(item1 => {
						item1['title'] = item1.name;
						item1['expand'] = true;
						item1['checked'] = item1.state == '1' ? true : false;
					})
					const result = this.$util.transData(res, 'id', 'pid', 'children');
					console.log(result);
					this.treedata = result;

					this.menuVisible = true;
        		}
        	});
        }
	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>

</style>
